.home-page {


  display: flex;
  width: 100%;
  max-width: @screenDefaultWidth;
  padding-left: 70px;
  padding-right: 70px;
  margin: 0 auto;
  flex-flow: row wrap;

  .home-subtitle {
    margin-top: 80px;
    width: 100%;

    h1 {
      color: #172B4D;
      text-align: center;
      width: 100%;
      font-size: 36px;
      line-height: 44px;
      letter-spacing: 0;
      font-weight: 500;
    }

    h2 {
      text-align: center;
      color: #42526E;
      margin: 0 0 24px;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: .3px;
      font-weight: normal;
      width: 100%;
    }
  }

  form {
    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    position: relative;

    input {
      height: 50px;
      width: 100%;
      display: block;
      font-size: 14px;
      padding-left: 20px;
      padding-right: 46px;
      color: #172B4D;
      border: 1px solid #EBECF0;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;

      &:focus {
        outline-style: none;
        box-shadow: 0px 0px 0px 2px #4c9aff;
        outline-color: #4c9aff;
      }
    }

    .am-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 10px;
      border: none;
      z-index: 1;
      cursor: pointer;
      width: 120px;
      height: 40px;
      background-color: #ecf5ff;
      color: #409eff;
    }

  }

  //文档选项卡切换
  .home-doc-tabs {
    width: 100%;

    .am-tabs-nav {
      display: flex;
      flex-flow: row;
      align-items: flex-end;
      border-bottom: 2px solid #cfcfcf;

      overflow-y: hidden;
      overflow-x: auto;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;


      &::-webkit-scrollbar {
        height: 1rem;
      }

      &:hover {
        &::-webkit-scrollbar-thumb {
          background: hsla(0, 0%, 53%, .4)
        }

        &::-webkit-scrollbar-track {
          background: hsla(0, 0%, 53%, .1)
        }
      }

      a {
        color: #42526E;
        //margin-bottom: -1px;
      }

      li.am-active > a {
        font-weight: bold;
        //margin-bottom: -2px;
        background: none;
        //border-bottom: 2px solid #0065FF;
        border-radius: 0;
        color: #0065FF;
      }
    }

    .am-tabs-bd {
      border: none;

      .am-gallery {
        display: flex;
        flex-flow: row wrap;

        li {
          width: 25%;
          margin: 0 0 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          &:hover {
            background-color: #F4F5F7;
          }

          a {
            display: block;
            color: #42526E;

            img {
              width: 80px;
              height: 80px;
            }
          }
        }
      }
    }
  }

  //文档选项卡切换
  @media only screen and (max-width: 640px) {
    max-width: none;
    padding: 0 1.5rem;
    .home-subtitle {
      margin-top: 5rem !important;
    }

    .home-doc-tabs {
      .am-tabs-nav {

      }
      .am-tab-panel{
        li{
          flex-direction: column;
          align-items: center;
        }
      }
    }

  }

  //文档列表
  .home-doc-list {

    margin-top: 2rem;

    width: 100%;

    .hom-doc-piece {
      margin-bottom: 70px;

      strong {
        font-size: 3.2rem;
        padding-bottom: 50px;
        display: block;
      }

      ul {
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        padding: 20px 30px;
        background: #f5f5f5;
        border: 1px solid #e6e6e6;
        border-radius: 5px;

        li {
          width: 25%;
          padding: 20px 0;
          @media only screen and (max-width: 640px) {
            width: 50%;
          }

          a {
            color: #42526E;

            &:hover {
              color: #0065FF;
            }
          }
        }
      }
    }
  }

  //封面文档
  .home-doc-cover {
    width: 100%;

    .am-gallery-item {
      border: 1px solid #ebeef5;
      transition: .3s;
      box-shadow: none;

      &:hover {
        opacity: 0.5;
        transition: opacity 1s;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      }

    }

    .home-doc-cover-img {
      width: 200px;
      height: 200px;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: center;
    }
  }

}
